// 导入three.js模块
import * as THREE from "three";
// 导入轨道控制器所依赖文件
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
// 1、创建一个场景
const scene = new THREE.Scene();
// 2、创建一个透视相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
// 设置相机的位置  添加到场景中
camera.position.set(0,0,10)

// 导入三维坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper)

/**
 * 添加几何物体
 */
// 创建几何物体
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
// cube.position.z = 5
//将物体添加到场景
scene.add(cube)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将渲染器的内容添加到body中
document.body.appendChild(renderer.domElement)

// 创建一个控制器
const orbitControls = new OrbitControls(camera,renderer.domElement)

// 使用渲染器，通过相机将场景渲染进来
// var cubeLength = 0.01
function animate(time) {
	// 让物体循环移动
    let t = time / 1000 % 5;
    let cubeLength = t * 1
    // console.log(cubeLength);
    cube.position.x = cubeLength
    // if(cube.position.x > 5){
    //     cube.position.x = 0
    // }

	renderer.render( scene, camera );
    // 渲染下一帧的时候就会调用animate函数
    requestAnimationFrame( animate );
}
animate();
